<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div>
          <el-row>
            <el-col :span="18">
              <el-form label-width="80px" size="small" :inline="true">
                <el-form-item label="关键字">
                  <el-input
                    style="200px"
                    v-model="requestParams.keyword"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="requestParams.state">
                    <el-option :value="1" label="启用"></el-option>
                    <el-option :value="0" label="禁用"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item style="text-align: right">
                  <el-button @click="clear()">清除</el-button>
                  <el-button @click="filter()" type="primary">搜索</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="6" style="text-align: right">
              <el-button
                icon="el-icon-edit"
                @click="addRole()"
                type="success"
                size="small"
                >新增技巧</el-button
              >
            </el-col>
          </el-row>
        </div>
        <el-alert
          :title="`数据一共 ${total} 条`"
          style="margin-bottom: 15px"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <el-table v-loading="loading" border :data="list">
          <el-table-column label="序号" sortable type="index" />
          <el-table-column label="文章标题" style="width: 200px" sortable>
            <template slot-scope="{ row }">
              {{ row.title }}
              <a
                @click.prevent="openVideo(row.videoURL)"
                v-if="row.videoURL"
                href=" "
                class="el-icon-film"
              ></a>
            </template>
          </el-table-column>
          <el-table-column label="阅读数" sortable prop="visits" />
          <el-table-column label="录入人" sortable prop="username" />
          <el-table-column label="录入时间" sortable>
            <template slot-scope="{ row }">
              <span>{{
                row.createTime | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" sortable prop="state">
            <template slot-scope="{ row }">
              <span>{{ row.state === 1 ? "已启用" : "已禁用" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable fixed="right" width="280">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="getVideo(row)"
                >预览</el-button
              >
              <el-button type="text" @click="toggleState(row)">{{
                row.state === 1 ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                @click="eidtRole(row)"
                :disabled="row.state === 1"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="deleteArticle(row)"
                :disabled="row.state === 1 || row.totals > 0"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-row type="flex" justify="center">
        <!-- 分页 -->
        <el-pagination
          style="margin-top: 20px; text-align: right"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          :page-size="requestParams.pagesize"
          :current-page="requestParams.page"
          @current-change="pager"
          :page-sizes="[5, 10, 20, 50]"
          @size-change="handleSizeChange"
          hide-on-single-page
        ></el-pagination>
      </el-row>
    </div>
    <!-- 添加 修改 -->
    <add-articles
      :row-id="rowId"
      ref="childname"
      :dialog-visible.sync="dialogVisible"
    ></add-articles>
    <!-- 预览 -->
    <preview-video
      ref="childnameV"
      :show-role-dialog.sync="showRoleDialog"
    ></preview-video>
    <!-- 视频 -->
    <div class="video-preview" v-if="videoURL">
      <div class="close" @click="closeVideo()">
        <span class="el-icon-close"></span>
      </div>
      <div class="box">
        <video ref="video" :src="videoURL"></video>
      </div>
    </div>
  </div>
</template>

<script>
import { changeState, list, remove } from '../../api/hmmm/articles'
import addArticles from '../components/articles-add.vue'
import PreviewVideo from '../components/articles-preview.vue'
export default {
  name: 'Articles',
  components: {
    addArticles,
    PreviewVideo
  },

  props: {},
  data () {
    return {
      requestParams: {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      total: 0,
      currArticle: {},
      videoURL: null,
      list: [],
      value: '',
      loading: false,
      dialogVisible: false,
      rowId: null,
      showRoleDialog: false
    }
  },
  created () {
    this.getListInfo()
  },
  mounted () {},
  methods: {
    // 视频
    openVideo (url) {
      this.videoURL = url
      this.$nextTick(() => {
        this.$refs.video.play()
      })
    },
    // 关闭视频
    closeVideo () {
      console.log(2)
      this.$refs.video.pause()
      this.videoURL = null
    },
    async toggleState (article) {
      await changeState({
        id: article.id,
        state: article.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      article.state = article.state === 1 ? 0 : 1
    },
    getVideo (id) {
      this.$refs.childnameV.getVideoById(id)
      this.showRoleDialog = true
    },
    addRole () {
      this.dialogVisible = true
    },
    async eidtRole (id) {
      this.rowId = id.id
      this.$refs.childname.getarticlesById(id)
      this.dialogVisible = true
    },
    async getListInfo () {
      this.loading = true
      const { data } = await list(this.requestParams)
      this.total = data.counts
      this.list = data.items
      this.loading = false
    },
    clear () {
      this.requestParams = {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      }
      this.getListInfo()
    },
    // 进行筛选
    filter () {
      this.requestParams.page = 1
      this.getListInfo()
    },
    // 分页
    pager (np) {
      this.requestParams.page = np
      this.getListInfo()
    },
    // 切换条数
    handleSizeChange (size) {
      this.requestParams.page = 1
      this.requestParams.pagesize = size
      this.getList()
    },

    deleteArticle (id) {
      this.$confirm('确认删除?', '提示', {
        type: 'warning'
      }).then(async action => {
        await remove(id)
        this.$message({
          message: '删除成功',
          type: 'success',
          showClose: true,
          duration: 3000
        })
        this.getListInfo()
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.articles-container {
  padding: 10px;
  .el-icon-film {
    color: blue;
    font-size: 18px;
  }
}
.video-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .close {
    z-index: 2;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }

  .box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
